<template>
    <div id="repairs">
<!--        导航栏-->
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <span>维修记录ID：</span>
                <el-input v-model="inputRepairs" placeholder="请输入维修记录ID" clearable style="width: 200px" clearable></el-input>
            </el-col>
            <el-col :span="5" class="col_2">
                <el-button type="primary" @click="searchRepairs">查询</el-button>
            </el-col>
        </el-row>
<!--主体表格-->
        <el-table
                :data="repairsData"
                style="width: 100%"
                stripe
        >
            <el-table-column
                    prop="id"
                    label="维修ID"
                    align="center"
                >
            </el-table-column>
            <el-table-column
                    prop="applicant"
                    label="报修人姓名"
                    align="center"
                >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="报修人电话"
                    align="center"
                >
            </el-table-column>
            <el-table-column label="报修状态" align="center">
                <template v-slot="slot">
                    <el-tag type="primary" v-if="slot.row.status===2">转交</el-tag>
                    <el-tag type="danger" v-if="slot.row.status===0">待处理</el-tag>
                    <el-tag type="success" v-if="slot.row.status===1">已处理</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否转交" align="center">
                <template v-slot="slot">
                    <el-tag type="success" v-if="slot.row.status_pass===1">已转交</el-tag>
                    <el-tag type="danger" v-else>未转交</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="问题详情" prop="content" align="center"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
            <el-table-column label="操作" width="300px" align="center">
                <template v-slot="slot">
                    <el-button type="success" size="mini" plain>查看详情</el-button>
                    <el-button type="primary" size="mini" plain>保修与任务转交</el-button>
                    <el-button type="danger" size="mini" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
                @size-change="handleSizeRepairs"
                @current-change="handleCurrentRepairs"
                :current-page.sync="queryInfoRepairs.page"
                :page-size="queryInfoRepairs.limit"
                layout="total, prev, pager, next"
                :total="tatils"
                background>
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "repairs",
        created() {
            this.getRepairsData();
        },
        data(){
            return{
                inputRepairs:'',
                queryInfoRepairs:{
                    action:'',
                    page:1,
                    limit:10,
                },
                repairsData:[],
                tatils:0,


            }
        },
        methods:{
            searchRepairs(){

            },
            async getRepairsData(){
                const {data:res}=await this.$http.get("repair",{params:this.queryInfoRepairs});
                console.log(res);
                if(res.code!==1){
                    return this.$message.error("获取数据失败");
                }else {
                    this.repairsData=res.result.data;
                    this.tatils=res.result.limitCount;
                }
            },
            handleSizeRepairs(newSize){
                this.queryInfoRepairs.limit=newSize;
                this.getRepairsData();
            },
            handleCurrentRepairs(newNum){
                this.queryInfoRepairs.page=newNum;
                this.getRepairsData();
            }

        }

    }
</script>

<style lang="less" scoped>
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        .col_1 {
            margin: 15px 0 15px 20px;
            span {
                font-size: 13px;
            }
        }
        .col_2 {
            .col_1();
            margin-left: -40px;
            margin-right: 0;
        }
    }
    .el-table{
        padding-left: 10px;
    }
    .el-pagination{
        text-align: center;
        margin-top: 10px;
    }
</style>
